<template>
  <view class="mine-container">
    <!-- 状态栏占位 -->
    <view class="status-bar-placeholder" :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 背景装饰 -->
    <view class="background-decoration">
      <view class="decoration-circle circle-1"></view>
      <view class="decoration-circle circle-2"></view>
      <view class="decoration-circle circle-3"></view>
    </view>

    <!-- 用户信息卡片 -->
    <view class="user-section">
      <view class="user-card" @tap="goToUserInfo">
        <view class="card-background">
          <view class="bg-pattern"></view>
        </view>
        <view class="user-info">
          <view class="avatar-container">
            <image class="avatar" :src="userInfo.avatar || defaultAvatar" mode="aspectFill"></image>
            <view class="avatar-ring"></view>
            <view class="online-status"></view>
          </view>
          <view class="info-content">
            <text class="nickname">{{ userInfo.nickName || userInfo.userName || '用户' }}</text>
            <text class="dept">{{ userInfo.deptName || '暂无部门' }}</text>
            <view class="user-tags">
              <!-- <text class="tag" v-if="roleGroup">{{ roleGroup }}</text> -->
              <text class="tag" v-if="postGroup">{{ postGroup }}</text>
            </view>
          </view>
          <view class="arrow-icon">
            <wd-icon name="arrow-right" color="rgba(255,255,255,0.8)" size="24rpx" />
          </view>
        </view>
      </view>
    </view>

    <!-- 快捷统计 -->
    <!-- <view class="stats-section">
      <view class="stats-card">
        <view class="stat-item">
          <text class="stat-number">{{ todayTasks || 0 }}</text>
          <text class="stat-label">今日待办</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-number">{{ completedTasks || 0 }}</text>
          <text class="stat-label">已完成</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-number">{{ totalApplications || 0 }}</text>
          <text class="stat-label">我的申请</text>
        </view>
      </view>
    </view> -->

    <!-- 功能菜单 -->
    <view class="menu-section">
      <!-- 个人管理 -->
      <view class="menu-group">
        <view class="group-header">
          <wd-icon name="user-circle" color="#667eea" size="24rpx" />
          <text class="group-title">个人管理</text>
        </view>
        <view class="menu-card">
          <view
            class="menu-item"
            @tap="goToUserInfo"
            :class="{ 'menu-item-active': activeItem === 'userInfo' }"
            @touchstart="setActiveItem('userInfo')"
            @touchend="clearActiveItem"
          >
            <view class="item-left">
              <view class="icon-wrapper info-icon">
                <wd-icon name="user" color="#4A90E2" size="32rpx" />
              </view>
              <view class="item-content">
                <text class="item-title">个人信息</text>
                <text class="item-desc">查看和编辑个人资料</text>
              </view>
            </view>
            <wd-icon name="arrow-right" color="#C0C4CC" size="24rpx" />
          </view>

          <view class="menu-divider"></view>

          <view
            class="menu-item"
            @tap="goToPassword"
            :class="{ 'menu-item-active': activeItem === 'password' }"
            @touchstart="setActiveItem('password')"
            @touchend="clearActiveItem"
          >
            <view class="item-left">
              <view class="icon-wrapper password-icon">
                <wd-icon name="lock" color="#50C878" size="32rpx" />
              </view>
              <view class="item-content">
                <text class="item-title">修改密码</text>
                <text class="item-desc">更改登录密码</text>
              </view>
            </view>
            <wd-icon name="arrow-right" color="#C0C4CC" size="24rpx" />
          </view>
        </view>
      </view>

      <!-- 应用设置 -->
      <view class="menu-group">
        <view class="group-header">
          <wd-icon name="setting" color="#667eea" size="24rpx" />
          <text class="group-title">应用设置</text>
        </view>
        <view class="menu-card">
          <view
            class="menu-item"
            @tap="goToSetting"
            :class="{ 'menu-item-active': activeItem === 'setting' }"
            @touchstart="setActiveItem('setting')"
            @touchend="clearActiveItem"
          >
            <view class="item-left">
              <view class="icon-wrapper setting-icon">
                <wd-icon name="setting" color="#9B59B6" size="32rpx" />
              </view>
              <view class="item-content">
                <text class="item-title">应用设置</text>
                <text class="item-desc">个性化配置</text>
              </view>
            </view>
            <wd-icon name="arrow-right" color="#C0C4CC" size="24rpx" />
          </view>

          <view class="menu-divider"></view>

          <view
            class="menu-item"
            @tap="goToHelp"
            :class="{ 'menu-item-active': activeItem === 'help' }"
            @touchstart="setActiveItem('help')"
            @touchend="clearActiveItem"
          >
            <view class="item-left">
              <view class="icon-wrapper help-icon">
                <wd-icon name="help" color="#FF9500" size="32rpx" />
              </view>
              <view class="item-content">
                <text class="item-title">常见问题</text>
                <text class="item-desc">帮助与支持</text>
              </view>
            </view>
            <wd-icon name="arrow-right" color="#C0C4CC" size="24rpx" />
          </view>

          <view class="menu-divider"></view>

          <view
            class="menu-item"
            @tap="goToAbout"
            :class="{ 'menu-item-active': activeItem === 'about' }"
            @touchstart="setActiveItem('about')"
            @touchend="clearActiveItem"
          >
            <view class="item-left">
              <view class="icon-wrapper about-icon">
                <wd-icon name="info" color="#FF6B6B" size="32rpx" />
              </view>
              <view class="item-content">
                <text class="item-title">关于我们</text>
                <text class="item-desc">版本信息</text>
              </view>
            </view>
            <wd-icon name="arrow-right" color="#C0C4CC" size="24rpx" />
          </view>
        </view>
      </view>

      <!-- 退出登录 -->
      <view class="logout-section">
        <view class="logout-button" @tap="handleLogout">
          <wd-icon name="logout" color="#ffffff" size="28rpx" />
          <text class="logout-text">退出登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/modules/user'
import { getUserProfile } from '@/api/system/user'
import type { TaskQuery } from '@/pagesA/api/workflow/task/types'
import { pageByTaskWait } from '@/pagesA/api/workflow/task'
import { getInfo } from '@/api/login'
import { pageByCurrent } from '@/pagesA/api/workflow/instance'

const userStore = useUserStore()
const activeItem = ref<string | null>(null)

// 用户信息
const userInfo = ref({
  avatar: '',
  nickName: '',
  userName: '',
  deptName: ''
})

// 默认头像
const defaultAvatar = '/static/images/profile.jpg'

// 角色和岗位信息
const roleGroup = ref('')
const postGroup = ref('')

// 统计数据
const todayTasks = ref(0)
const completedTasks = ref(0)
const totalApplications = ref(0)

// 设置激活项
const setActiveItem = (item: string) => {
  activeItem.value = item
}

// 清除激活项
const clearActiveItem = () => {
  activeItem.value = null
}

// 获取用户信息
const getUserInfo = async () => {
  try {
    const res = await getUserProfile()
    if (res.code === 200) {
      userInfo.value = res.data.user || {}
      roleGroup.value = res.data.roleGroup || ''
      postGroup.value = res.data.postGroup || ''
    }
  } catch (error) {
    // 如果API调用失败，使用store中的数据
    userInfo.value = {
      avatar: userStore.avatar,
      nickName: userStore.nickname,
      userName: userStore.username,
      deptName: userStore.deptname
    }
  }
}

// 获取统计数据
const getStatistics = () => {
  // 模拟获取统计数据
  todayTasks.value = taskStats.value.waitingForMe
  completedTasks.value = taskStats.value.waitingForOthers
  totalApplications.value = taskStats.value.waitingForOthers
}
const taskStats = ref({ waitingForMe: 0, waitingForOthers: 0 });
const initPageData = async () => {
  try {
    const query: TaskQuery = { pageNum: 1, pageSize: 10 };
    const [userRes, waitRes, currentRes] = await Promise.all([getInfo(),  pageByTaskWait(query), pageByCurrent(query)]);
    const waitTotal = waitRes.total || 0;
    const currentTotal = currentRes.total || 0;

    taskStats.value = { waitingForMe: waitTotal, waitingForOthers: currentTotal };
    getStatistics()
  } catch (error) {
    console.error('初始化首页数据失败:', error);
  }
};
// 页面跳转方法
const goToUserInfo = () => {
  uni.navigateTo({
    url: '/pages/mine/info/index'
  })
}

const goToPassword = () => {
  uni.navigateTo({
    url: '/pages/mine/pwd/index'
  })
}

const goToSetting = () => {
  uni.navigateTo({
    url: '/pages/mine/setting/index'
  })
}

const goToHelp = () => {
  uni.navigateTo({
    url: '/pages/mine/help/index'
  })
}

const goToAbout = () => {
  uni.navigateTo({
    url: '/pages/mine/about/index'
  })
}

// 退出登录
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    confirmText: '确定',
    cancelText: '取消',
    confirmColor: '#e70e0e',
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({
          title: '退出中...'
        })

        userStore.logout().then(() => {
          uni.hideLoading()
          uni.reLaunch({
            url: '/pages/login'
          })
        }).catch(() => {
          uni.hideLoading()
          uni.showToast({
            title: '退出失败',
            icon: 'error'
          })
        })
      }
    }
  })
}

// 状态栏高度
const statusBarHeight = ref(0)

// 设置状态栏高度
const setStatusBarHeight = () => {
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight || 0
}

// 页面加载时获取数据
onMounted(() => {
  setStatusBarHeight()
  getUserInfo()
  // getStatistics()
})

// 页面显示时刷新数据
onShow(() => {
  getUserInfo()
  // getStatistics()
})


</script>

<style lang="scss" scoped>
.mine-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow-x: hidden;
  padding-top: 50rpx;
  margin-top: 0;
}

/* 状态栏占位 */
.status-bar-placeholder {
  background: transparent;
  position: relative;
  z-index: 1;
}



/* 背景装饰 */
.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;

  .decoration-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 20s ease-in-out infinite;

    &.circle-1 {
      width: 200rpx;
      height: 200rpx;
      top: 10%;
      right: -50rpx;
      animation-delay: 0s;
    }

    &.circle-2 {
      width: 150rpx;
      height: 150rpx;
      top: 60%;
      left: -30rpx;
      animation-delay: 7s;
    }

    &.circle-3 {
      width: 100rpx;
      height: 100rpx;
      top: 80%;
      right: 20%;
      animation-delay: 14s;
    }
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-20rpx) rotate(120deg); }
  66% { transform: translateY(10rpx) rotate(240deg); }
}

/* 用户信息区域 */
.user-section {
  padding: 0 30rpx 40rpx;
  position: relative;
  z-index: 2;
}

.user-card {
  position: relative;
  border-radius: 32rpx;
  overflow: hidden;
  box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  &:active {
    transform: translateY(2rpx) scale(0.98);
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.25);
  }
}

.card-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%);
  backdrop-filter: blur(20rpx);

  .bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08) 0%, transparent 50%);
  }
}

.user-info {
  position: relative;
  z-index: 2;
  padding: 40rpx;
  display: flex;
  align-items: center;
}

.avatar-container {
  position: relative;
  margin-right: 30rpx;

  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 60rpx;
    border: 4rpx solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
  }

  .avatar-ring {
    position: absolute;
    top: -6rpx;
    left: -6rpx;
    width: 132rpx;
    height: 132rpx;
    border: 2rpx solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
  }

  .online-status {
    position: absolute;
    bottom: 8rpx;
    right: 8rpx;
    width: 24rpx;
    height: 24rpx;
    background: #4CAF50;
    border: 3rpx solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.4);
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

.info-content {
  flex: 1;

  .nickname {
    display: block;
    font-size: 40rpx;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8rpx;
    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
    user-select: text;
    -webkit-user-select: text;

    &::selection {
      background: rgba(255, 255, 255, 0.3);
      color: #ffffff;
    }
  }

  .dept {
    display: block;
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 16rpx;
    user-select: text;
    -webkit-user-select: text;

    &::selection {
      background: rgba(255, 255, 255, 0.2);
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .user-tags {
    display: flex;
    gap: 12rpx;

    .tag {
      padding: 6rpx 16rpx;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 20rpx;
      font-size: 22rpx;
      color: #ffffff;
      backdrop-filter: blur(10rpx);
      border: 1rpx solid rgba(255, 255, 255, 0.3);
    }
  }
}

.arrow-icon {
  margin-left: 20rpx;
  transition: transform 0.3s ease;
}

.user-card:active .arrow-icon {
  transform: translateX(4rpx);
}

/* 统计区域 */
.stats-section {
  margin: 0 30rpx 40rpx;
  position: relative;
  z-index: 2;
}

.stats-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  border-radius: 24rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
  border: 1rpx solid rgba(255, 255, 255, 0.3);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;

  .stat-number {
    font-size: 48rpx;
    font-weight: 700;
    color: #667eea;
    margin-bottom: 8rpx;
    text-shadow: 0 2rpx 4rpx rgba(102, 126, 234, 0.2);
    user-select: text;
    -webkit-user-select: text;

    &::selection {
      background: rgba(102, 126, 234, 0.3);
      color: #667eea;
    }
  }

  .stat-label {
    font-size: 24rpx;
    color: #999999;
    font-weight: 500;
    user-select: text;
    -webkit-user-select: text;

    &::selection {
      background: rgba(153, 153, 153, 0.3);
      color: #999999;
    }
  }
}

.stat-divider {
  width: 1rpx;
  height: 60rpx;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.1), transparent);
  margin: 0 20rpx;
}

/* 菜单区域 */
.menu-section {
  padding: 0 30rpx 40rpx;
  position: relative;
  z-index: 2;
}

.menu-group {
  margin-bottom: 40rpx;

  .group-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    padding: 0 20rpx;

    .group-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #ffffff;
      margin-left: 12rpx;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
      user-select: text;
      -webkit-user-select: text;

      &::selection {
        background: rgba(255, 255, 255, 0.3);
        color: #ffffff;
      }
    }
  }
}

.menu-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
  border: 1rpx solid rgba(255, 255, 255, 0.3);
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 30rpx;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
    transition: left 0.5s;
  }

  &:active,
  &.menu-item-active {
    background: rgba(102, 126, 234, 0.08);
    transform: scale(0.98);

    &::before {
      left: 100%;
    }
  }
}

.item-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.icon-wrapper {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.info-icon {
  background: linear-gradient(135deg, #4A90E2, #357ABD);
  box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.3);
}

.password-icon {
  background: linear-gradient(135deg, #50C878, #3A9B5C);
  box-shadow: 0 4rpx 12rpx rgba(80, 200, 120, 0.3);
}

.setting-icon {
  background: linear-gradient(135deg, #9B59B6, #8E44AD);
  box-shadow: 0 4rpx 12rpx rgba(155, 89, 182, 0.3);
}

.help-icon {
  background: linear-gradient(135deg, #FF9500, #E6850E);
  box-shadow: 0 4rpx 12rpx rgba(255, 149, 0, 0.3);
}

.about-icon {
  background: linear-gradient(135deg, #FF6B6B, #E55555);
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
}

.item-content {
  display: flex;
  flex-direction: column;

  .item-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
    line-height: 1.4;
    margin-bottom: 4rpx;
    user-select: text;
    -webkit-user-select: text;

    &::selection {
      background: rgba(102, 126, 234, 0.3);
      color: #333333;
    }
  }

  .item-desc {
    font-size: 24rpx;
    color: #999999;
    line-height: 1.3;
    user-select: text;
    -webkit-user-select: text;

    &::selection {
      background: rgba(153, 153, 153, 0.3);
      color: #999999;
    }
  }
}

.menu-divider {
  height: 1rpx;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
  margin: 0 30rpx;
}

/* 退出登录区域 */
.logout-section {
  margin-top: 20rpx;
}

.logout-button {
  background: linear-gradient(135deg, #FF6B6B, #E55555);
  border-radius: 28rpx;
  padding: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(255, 107, 107, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
  }

  &:active {
    transform: translateY(2rpx) scale(0.98);
    box-shadow: 0 4rpx 16rpx rgba(255, 107, 107, 0.5);

    &::before {
      left: 100%;
    }
  }

  .logout-text {
    font-size: 32rpx;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
    user-select: text;
    -webkit-user-select: text;

    &::selection {
      background: rgba(255, 255, 255, 0.3);
      color: #ffffff;
    }
  }
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
  .user-section {
    padding: 0 20rpx 30rpx;
  }

  .user-card .user-info {
    padding: 30rpx;
  }

  .avatar-container {
    margin-right: 24rpx;

    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50rpx;
    }

    .avatar-ring {
      width: 112rpx;
      height: 112rpx;
      top: -6rpx;
      left: -6rpx;
    }
  }

  .info-content {
    .nickname {
      font-size: 36rpx;
    }

    .dept {
      font-size: 26rpx;
    }

    .user-tags .tag {
      font-size: 20rpx;
      padding: 4rpx 12rpx;
    }
  }

  .stats-section,
  .menu-section {
    margin-left: 20rpx;
    margin-right: 20rpx;
  }

  .stats-card {
    padding: 24rpx;
  }

  .stat-item .stat-number {
    font-size: 42rpx;
  }

  .menu-item {
    padding: 28rpx 24rpx;
  }

  .icon-wrapper {
    width: 70rpx;
    height: 70rpx;
    border-radius: 16rpx;
    margin-right: 20rpx;
  }

  .item-content {
    .item-title {
      font-size: 30rpx;
    }

    .item-desc {
      font-size: 22rpx;
    }
  }

  .logout-button {
    padding: 28rpx;
    border-radius: 24rpx;

    .logout-text {
      font-size: 30rpx;
    }
  }
}

/* 动画效果 */
.user-section {
  animation: slideInDown 0.6s ease-out;
}

.stats-section {
  animation: slideInUp 0.6s ease-out 0.1s both;
}

.menu-group:nth-child(1) {
  animation: slideInUp 0.6s ease-out 0.2s both;
}

.menu-group:nth-child(2) {
  animation: slideInUp 0.6s ease-out 0.3s both;
}

.logout-section {
  animation: slideInUp 0.6s ease-out 0.4s both;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 全局文本选择样式 */
::selection {
  background: rgba(102, 126, 234, 0.3);
  color: inherit;
}

::-moz-selection {
  background: rgba(102, 126, 234, 0.3);
  color: inherit;
}
</style>
